<script setup lang='ts'>
import { ref } from 'vue';
// 删除
import { ElMessage,ElMessageBox } from 'element-plus'
import { addLabelTitle, delLabel, getLabel, modifyLabel } from '@/api/axios/platformAxios';

// const label = ref('')
const labelTitle = ref({
    label: ''
})

const tableData = ref([])
function initLabel() {
    getLabel().then(res => {
        // console.log(res);
        tableData.value = res.rows
    })
}
initLabel()

const dialogVisible = ref(false)
const dialogVisibleAdd = ref(false)

const labelData = ref({
    enable: '',
    id: '',
    label: ''
})

function addLabel() {
    labelTitle.value.label = ''
    dialogVisibleAdd.value = true
}

function saveAddLabel() {
    addLabelTitle(labelTitle.value).then(res => {
        console.log(res);
        ElMessage({
            showClose: true,
            message: res.msg,
            type: 'success',
        })
        initLabel()
    })
    dialogVisibleAdd.value = false;
}

function edit(data) {
    // console.log(data);
    dialogVisible.value = true
    labelData.value.id = data.id
    labelData.value.label = data.label
    labelData.value.enable = data.enable
}

function saveLabel() {
    modifyLabel(labelData.value).then(res => {
        // console.log(res);
        ElMessage({
            showClose: true,
            message: res.msg,
            type: 'success',
        })
        initLabel()
    })
    dialogVisible.value = false
}

const handleClose = (done: () => void) => {
    ElMessageBox.confirm('是否关闭？')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

const handleCloseAdd = (done: () => void) => {
    ElMessageBox.confirm('是否关闭？')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

const del = (data) => {
    console.log(data);
    ElMessageBox.confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            });

            delLabel(data.id).then(res => {
                console.log(res);
                initLabel()
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
}
</script>

<template>
    <div style='margin: 20px 35px'>
        <el-button type="primary" @click='addLabel'>添加</el-button>
    </div>
    <div>
        <el-table :data="tableData" style="width: 95%;margin: 0 auto" border='true' >
            <el-table-column prop="label" label="名称" align='center' width='300'/>
            <el-table-column prop="updateTime" label="更新时间" align='center'/>
            <el-table-column fixed="right" label="操作" width="500" align='center'>
                <template v-slot='scope'>
                    <el-button link type="primary" style='font-size: 13px' @click='edit(scope.row)'>编辑</el-button>
                    <el-button link type="primary" style='font-size: 13px' @click='del(scope.row)'>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>


    <div>
        <el-dialog
            v-model="dialogVisible"
            title="编辑"
            width="690"
            :before-close="handleClose"
        >
            <div style='margin-bottom: 50px'>
                <span style='margin: 0 20px'>标签名称:</span>
                <el-input
                    v-model="labelData.label"
                    style="width: 340px"
                    maxlength="20"
                    placeholder="请输入名称"
                    show-word-limit
                    type="text"
                    size='large'
                />
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false" size='large'>取消</el-button>
                    <el-button type="primary" size='large' @click="saveLabel">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>

    <div>
        <el-dialog
            v-model="dialogVisibleAdd"
            title="添加"
            width="690"
            :before-close="handleCloseAdd"
        >
            <div style='margin-bottom: 50px'>
                <span style='margin: 0 20px'>标签名称:</span>
                <el-input
                    v-model="labelTitle.label"
                    style="width: 340px"
                    maxlength="20"
                    placeholder="请输入名称"
                    show-word-limit
                    type="text"
                    size='large'
                />
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisibleAdd = false" size='large'>取消</el-button>
                    <el-button type="primary" size='large' @click="saveAddLabel">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>

</template>

<style lang='scss'>
.gap-4 {
    padding: 26px 25px;
    width: 100%;
    margin-left: 20px;
}
div.cell{
    height: 36px;
    font-size: 14px;
    line-height: 36px;
    padding: 9px 0 !important;
}

.el-dialog__header {
    background-color: #1892ff;
    margin-right: 0;
    .el-dialog__title {
        font-size: 18px;
        color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close {
        color: #fff !important;
    }
}
</style>
